<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">添加收获地址</block>
		</cu-custom>
		<view class="add-content">
			<view class="input-item">
				<view class="input-title">
					收货人
				</view>
				<view class="input-c">
					<input type="text" v-model="name" maxlength="6" placeholder="请输入收货人名称" placeholder-class="place-holder" />
				</view>
			</view>
			<view class="input-item">
				<view class="input-title">
					手机号码
				</view>
				<view class="input-c">
					<input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号码" placeholder-class="place-holder" />
				</view>
			</view>
			<view class="input-item">
				<view class="input-title">
					所在地区
				</view>
				<view class="input-c truth-add" @click="openBindPicker">
					<view :style="region=='请选择当前所在地区'?'color: #666':'color: #333'">{{region}}</view>
					<tui-icon :name="'arrowright'" :size="'20'" :color="'#666'"></tui-icon>
				</view>
			</view>
			<view class="input-item">
				<view class="input-title">
					详细地址
				</view>
				<view class="input-c">
					<textarea v-model="detailAdd" placeholder="详细地址:如道路、门牌、小区、楼栋号、单元室等" placeholder-class="place-holder" /></textarea>
				</view>
			</view>
		</view>
		<view class="is-default">
			<view class="input-item  swich-tab">
				<view class="input-title">
					设置默认地址
				</view>
				<view>
					<switch @change="switchBindChange" :color="'#f34930'" :checked="isDefault"/>
				</view>
			</view>
		</view>
		<lotus-address v-on:choseVal="choseValueNew" :lotusAddressData="lotusAddressData" :lotusAddressJson="lotusAddressJson" v-if="addShow"></lotus-address>

		<view class="submmit bg-colorP" @click="submitNew">
			保存
		</view>
	</view>
</template>

<script>
	import tuiIcon from "@/components/thorUI/icon.vue";
	import lotusAddress from "@/components/Provinces-truth/Winglau14-lotusAddress.vue";
	export default ({
		components: {
			tuiIcon,
			lotusAddress
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				region: '请选择当前所在地区',
				regionCode: '',
				phone: '',
				name: '',
				detailAdd: '',
				lotusAddressData: {
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				},
				isDefault: false,
				isUpdate: false,
				lotusAddressJson:[],
				addShow: false
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		onLoad(options) {
			if (options.data) {
				var data = JSON.parse(options.data)
				this.name = data.name
				this.lotusAddressData.provinceName = data.all_address_arr[0]
				this.lotusAddressData.cityName = data.all_address_arr[1]
				this.lotusAddressData.townName = data.all_address_arr[2]
				this.phone = data.phone
				this.detailAdd = data.address
				this.isDefault = data.is_default == 1 ? true : false
				this.region = data.all_address_str
				this.isUpdate = true
				this.adressId = data.id
				this.regionCode = data.areaPath
			}
			this.getJson()
		},
		methods: {
			getJson() {
				var that = this;
				// #ifdef !H5
				this.$request({
					url: '/static/admin/js/address.json',
					success: res => {
						that.lotusAddressJson = res.data
						that.addShow = true
					},
					fail: () => {},
					complete: () => {}
				});
				// #endif                                                                                
				// #ifdef H5
				uni.request({
					url: 'http://zsgzh.miandanshidai.com/Winglau14-lotusAddress.json',
					success: res => {
						that.lotusAddressJson = res.data
					},
					fail: () => {},
					complete: () => {}
				})
				// #endif
			},
			switchBindChange(e) {
				this.isDefault = e.target.value
			},
			//打开picker
			openBindPicker() {
				this.lotusAddressData.visible = true;
				if (this.lotusAddressData.provinceName && this.lotusAddressData.cityName && this.lotusAddressData.townName) {

				} else {
					this.lotusAddressData.provinceName = '北京市';
					this.lotusAddressData.cityName = '北京市';
					this.lotusAddressData.townName = '东城区';
				}
			},
			//回传地区值用于筛选
			choseValueNew(res) {
				this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if (res.isChose) {
					this.lotusAddressData.provinceName = res.province; //省
					this.lotusAddressData.cityName = res.city; //市
					this.lotusAddressData.townName = res.town; //区
					this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
					this.regionCode = `${res.provinceCode}_${res.cityCode}_${res.townCode}`; //region为已选的省市区的值
				}
			},
			// 提交数据
			submitNew() {
				var that = this;
				var name = this.name;
				var phone = this.phone;
				var region = this.region;
				var detailAdd = this.detailAdd;
				var isDefault = this.isDefault
				if (name == '') {
					this.uniShowToast('请填写收货人姓名')
					return false
				}

				if (phone == '') {
					this.uniShowToast('请填写收货人手机号码')
					return false
				} else if (!(/^1[3456789]\d{9}$/.test(phone))) {
					this.uniShowToast('手机号码格式有误')
					return false
				}

				if (region == '请选择当前所在地区') {
					this.uniShowToast('请选择当前所在地区')
					return false
				}

				if (detailAdd == '') {
					this.uniShowToast('请填写详细地址')
					return false
				}

				// 提交
				if (this.isUpdate) {
					this.$request({
						url: '/UserRelation/sets',
						data: {
							name: that.name,
							areaPath: that.regionCode,
							address: that.detailAdd,
							is_default: that.isDefault ? '1' : '0',
							phone: that.phone,
							id: that.adressId
						},
						success: res => {
							if (res.data.status == 1) {
								uni.hideLoading()
								uni.showModal({
									content: '更新收货地址成功~',
									showCancel: false,
									confirmText: '返回',
									success(res) {
										if (res.confirm) {
											uni.navigateBack({
												delta: 1
											});
										}
									}
								})
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.$request({
						url: '/UserRelation/adds',
						data: {
							name: that.name,
							areaPath: that.regionCode,
							address: that.detailAdd,
							is_default: that.isDefault ? '1' : '0',
							phone: that.phone
						},
						success: res => {
							if (res.data.status == 1) {
								uni.hideLoading()
								uni.showModal({
									content: '添加收货地址成功~',
									showCancel: false,
									confirmText: '返回',
									success(res) {
										if (res.confirm) {
											uni.navigateBack({
												delta: 1
											});
										}
									}
								})
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			uniShowToast(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			}
		}
	})
</script>

<style>
	page {
		background: #f5f5f5;
	}
</style>
<style scoped>
	.add-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 0 24rpx;
	}

	.truth-add {
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
	}

	.truth-add view {
		/* text-align: right; */
		/* flex: 1; */
		font-size: 30rpx;
	}

	.input-item {
		width: 100%;
		display: flex;
		flex-direction: column;
		border-bottom: solid 1rpx #efefef;
		box-sizing: border-box;
		padding: 10rpx 0;
	}

	.input-item .input-title {
		width: 200rpx;
		font-size: 32rpx;
		color: #333;
		line-height: 66rpx;
	}

	.input-item .input-c {
		flex: 1;
		font-size: 30rpx;
		color: #333333;
	}

	textarea {
		width: 100%;
		padding: 10rpx 0;
		box-sizing: border-box;
		height: 150rpx;
		font-size: 28rpx;
		color: #333;
	}

	.is-default {
		width: 100%;
		margin-top: 30rpx;
		background: #fff;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.is-default .input-item {
		border: none
	}

	.swich-tab {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.submmit {
		width: 702rpx;
		height: 98rpx;
		border-radius: 8rpx;
		font-size: 36rpx;
		text-align: center;
		line-height: 98rpx;
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		margin-left: -351rpx;
		font-weight: 400;
	}
</style>
<style>
	.place-holder {
		color: #666;
		font-size: 30rpx;
	}
</style>
